<template>
  <div id="newProduct">
    <div class="card">
      <div class="card-header bg-info text-white">
        景点信息
        <span class="float-end" @click.stop="back()">返回</span>
      </div>
      <div class="card-body">
        <form>
          <div class="row mb-2">
            <label class="col-2 col-form-label text-end">名称</label>
            <div class="col-10">
              <input type="text" class="form-control" v-model="name" />
            </div>
          </div>
          <div class="row mb-2">
            <label class="col-2 col-form-label text-end">地址</label>
            <div class="col-10">
              <input type="text" class="form-control" v-model="address" />
            </div>
          </div>
          <div class="row mb-2">
            <label class="col-2 col-form-label text-end">开放时间</label>
            <div class="col-10">
              <input type="text" class="form-control" v-model.trim="openTime" />
            </div>
          </div>
          <div class="row mb-2">
            <label class="col-2 col-form-label text-end">简介</label>
            <div class="col-10">
              <input
                type="text"
                class="form-control"
                v-model.trim="shortIntro"
              />
            </div>
          </div>
          <div class="row mb-2">
            <label class="col-2 col-form-label text-end">备注</label>
            <div class="col-10">
              <input type="text" class="form-control" v-model.trim="remark" />
            </div>
          </div>
          <div class="row mb-2">
            <label class="col-2 col-form-label text-end">状态</label>
            <div class="col-10">
              <div class="form-check form-check-inline">
                <input
                  class="form-check-input"
                  type="radio"
                  value="0"
                  v-model.number="status"
                />
                <label class="form-check-label text-danger">停用</label>
              </div>
              <div class="form-check form-check-inline">
                <input
                  class="form-check-input"
                  type="radio"
                  value="1"
                  v-model.number="status"
                />
                <label class="form-check-label text-success">启用</label>
              </div>
            </div>
          </div>
        </form>
      </div>
      <div class="card-footer text-center">
        <button
          class="btn btn-primary ms-auto me-auto"
          type="button"
          @click.stop="create()"
        >
          保存
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import { saveAttraction, getAttraction } from "@/api/attraction.js";

export default {
  data() {
    return {
      id: 0,
      name: "",
      address: "",
      openTime: "",
      shortIntro: "",
      remark: "",
      status: 0,
    };
  },
  mounted: function () {
    const id0 = this.$route.query.id;
    if (id0 !== undefined) {
      const id1 = parseInt(id0);
      if (isNaN(id1) === false) {
        this.id = id1;
        this.getAttractionDetail();
      }
    }
  },
  methods: {
    back: function () {
      this.$router.go(-1);
    },
    showErrMsg: function (msg, msgType) {
      this.$store.dispatch("showAlertMsg", {
        errMsg: msg,
        errMsgType: msgType,
      });
    },
    getAttractionDetail: function () {
      getAttraction(this.id, (v) => {
        this.name = v.name;
        this.address = v.address;
        this.openTime = v.openTime;
        this.shortIntro = v.shortIntro;
        this.remark = v.remark;
        this.status = v.status;
      });
    },
    create: function () {
      var params = {
        id: this.id,
        name: this.name,
        address: this.address,
        openTime: this.openTime,
        shortIntro: this.shortIntro,
        remark: this.remark,
        status: this.status,
      };

      saveAttraction(
        params,
        (jsonResult) => {
          if (jsonResult.status === "OK") {
            this.showErrMsg("OK");
            this.reset();
            this.$router.push("/attractions");
          } else {
            this.showErrMsg("ER: " + jsonResult.errmsg, "danger");
          }
        },
        () => {},
        () => {}
      );
    },
    reset: function () {
      this.id = 0;
      this.name = "";
      this.remark = "";
      this.price = 0;
      this.discount = 0;
      this.cost = 0;
    },
  },
};
</script>
